import React, { Component } from 'react';
import Topnav from '@/components/Topnav'
import Swiper from './ui/swiper';
import Searchbtn from '@/components/Searchbtn/Searchbtn';
import { withRouter } from 'react-router-dom'
import Hotcate from './ui/Hotcate';
import connect from './connect';
import Goodfood from './ui/Goodfood';
import Loading from '@/components/Loading'

class Cookbook extends Component {
    state = {
        loading: true
    }
    componentDidMount() {
        Promise.all([
            this.props.swipers.length === 0 && this.props.getSwiperAction(),
            this.props.cates.length === 0 && this.props.getHotCateAction(),
            this.props.goodfoods.length === 0 && this.props.getGoodFoodAction()
        ]).then(ret => this.setState({ loading: false }))

    }
    render() {
        return (
            <div>
                <Topnav rightText="搜索" onRight={() => this.props.history.push('/search')} />

                {
                    this.state.loading
                        ?
                        <Loading />
                        :
                        <>
                            <Swiper swipers={this.props.swipers} />
                            <Searchbtn onSelect={() => this.props.history.push('/search')} title='想吃什么搜这里，如：锅包肉' />
                            <Hotcate {...this.props} />
                            <Goodfood {...this.props} />
                        </>

                }


            </div>
        );
    }
}

export default withRouter(connect(Cookbook));

